<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>车辆状态</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/main.css" media="all" />
    <link rel="stylesheet" href="resources/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="resources/layui/css/public.css" media="all" />
</head>
<body >
<div style="margin-top:70px;margin-left:200px;"  id="product" ></div>
<!--<div style="margin-top:640px;margin-left:200px;">-->
<br/>
    <div style="margin-top:400px;" align="center"   id="layuipage" ></div>
<!--</div>-->

<script type="text/javascript" src="resources/layui/layui/layui.js"></script>
<script >
    layui.use(['form','layer',  'laypage','laydate','table','laytpl','upload'],function() {
        var form = layui.form
        layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table,
            upload=layui.upload;
            laypage = layui.laypage;

        var page = 1;//当前页
        var limit = 16;//每页显示的数目
        var resCount, resData ;
        var resPage = renderPage1();

        //渲染展示商品的html页面
        function renderProductHtml(data){
            var str = "";//用来存储html内容
            var pic;
            if(data.length > 0){
                $.each(data, function(v, o){
                    switch (o.car_state.name){
                        case '可用':
                            pic='carstate_1.png';
                            break;
                        case '出车':
                            pic='carstate_2.png';
                            break;
                        case '维修':
                            pic='carstate_3.png';
                            break;
                        case '其他':
                            pic='carstate_4.png';
                            break;
                    }
                    str += "<div style='width:200px;  float:left; text-align:center'><div><img alt='' src='/upload/"+pic+"' width='150px' height='150px'/></div>";
                    str += "<div style='text-align:center'><div><label></label><span>"+o.car_no+'【'+o.car_state.name+'】'+"</span></div>";
                    str += "</div></div>"
                });
                $("#product").html(str);
            }

        }

        //同步加载商品数据
        function renderProduct(){
            $.ajax({
                async: false,
                url: 'cars',
                success: function(result){
                    console.info(result);
                    resCount = result.count;
                    resData = result.data;
                    renderProductHtml(resData);
                }
            });
        }

        function renderPage1(){
            renderProduct();//关键
            laypage.render({
                elem: 'layuipage'//div的id，不能加#
                ,count: resCount//数据总条数
                ,limit: limit//每页显示多少条数据
                ,limits: [limit]//可选择的 每页显示多少条数据
                ,curr: page//当前页码
                ,theme: '#FFB800'//分页导航栏的颜色，用了橘色
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                ,jump: function(obj, first){
                    console.info(obj);
                    page = obj.curr;
                }
            });
        }
    });

</script>

</body>
</html>